<template>
  <div>
    <el-table
      v-loading="loading"
      :data="categoryList"
      row-key="data.id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="data.id" label="ID" min-width="100"/>
      <el-table-column label="层级">
        <template slot-scope="props">
          {{ props.row.data.level + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="data.title" label="分类名"/>
      <el-table-column prop="data.blogNums" label="关联文章数"/>
      <el-table-column label="创建日期">
        <template slot-scope="props">
          {{ props.row.data.createdTime | formatTimer }}
        </template>
      </el-table-column>
      <el-table-column>
        <template slot="header">
          <span>操作</span>
          <el-button size="small" type="success" plain style="float: right" @click="createCate">新建分类</el-button>
        </template>
        <template slot-scope="props">
          <el-button size="small" type="text" @click="updateCate(props.row.data)">修改</el-button>
          <el-divider direction="vertical"/>
          <el-button
            v-if="props.row.data.level <= 1"
            size="small"
            type="text"
            @click="createChildCate(props.row.data.id, props.row.data.level)"
          >
            创建子类
          </el-button>
          <el-divider v-if="props.row.data.level <= 1" direction="vertical"/>
          <el-popover
            v-model="props.row.deletePopVisible"
            placement="top"
          >
            <p>确定删除此分类吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="props.row.deletePopVisible = false">取消</el-button>
              <el-button type="text" size="mini" style="color: #db3f3f" @click="deleteCate(props.row)">删除</el-button>
            </div>
            <el-button slot="reference" type="text" size="small">删除</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="createCateFormVisible">
      <template slot="title">
        {{ title }}
      </template>
      <el-form ref="cateUpdateForm" :model="cateCreateForm">
        <el-form-item
          label="分类名"
          prop="title"
          :rules="[
            { required: true,message: '分类名称不能为空',trigger: ['blur','change'] }
          ]"
        >
          <el-input v-model="cateCreateForm.title" maxlength="10" show-word-limit autocomplete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancelEdit">取 消</el-button>
        <el-button type="primary" size="small" @click="doUpdateCate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {createCategory, deleteCategory, queryCategoryTree, updateCategory} from '@/api/blog/category'
import {Message} from "element-ui";

export default {
  name: 'BlogCategoryTable',
  filters: {
    formatTimer: function (value) {
      const date = new Date(Number(value))
      const y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      let h = date.getHours()
      h = h < 10 ? '0' + h : h
      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s
      return `${y}-${MM}-${d} ${h}:${m}:${s}`
    }
  },
  props: {
    params: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      createCateFormVisible: false,
      cateCreateForm: {
        id: '',
        title: '',
        parentId: ''
      },
      deletePopVisible: false,
      categoryList: [],
      loading: true,
      title: '创建分类'
    }
  },
  watch: {
    'params': function (n) {
      this.queryCategoryList()
    }
  },
  created() {
    this.queryCategoryList()
  },
  methods: {
    queryCategoryList() {
      this.loading = true
      this.params.queryBlogNum = true
      queryCategoryTree(this.params).then(resp => {
        this.loading = false
        this.categoryList = resp.data.children
      })
    },
    initCate() {
      this.cateCreateForm = {
        id: '',
        title: ''
      }
    },
    createCate() {
      this.cateCreateForm = {
        id: '',
        title: '',
        parentId: 0,
        level: 0,
        create: true
      }
      this.title = '创建分类'
      this.createCateFormVisible = true
    },
    createChildCate(pid, level) {
      this.cateCreateForm = {
        id: '',
        title: '',
        parentId: pid,
        level: level + 1,
        create: true
      }
      this.title = '创建子类'
      this.createCateFormVisible = true
    },
    updateCate(cate) {
      this.cateCreateForm.id = cate.id
      this.cateCreateForm.title = cate.title
      this.title = '修改分类信息'
      this.createCateFormVisible = true
    },
    deleteCate(row) {
      row.deletePopVisible = false
      deleteCategory(row.data.id).then(resp => {
        Message({
          message: '删除成功',
          type: 'success',
          duration: 2 * 1000
        })
        this.queryCategoryList()
      })
    },
    doUpdateCate() {
      this.$refs['cateUpdateForm'].validate((valid) => {
        if (valid) {
          if (this.cateCreateForm.create) {
            createCategory(this.cateCreateForm).then(resp => {
              this.createCateFormVisible = false
              this.queryCategoryList()
              this.initCate()
            })
          } else {
            updateCategory(this.cateCreateForm).then(resp => {
              this.createCateFormVisible = false
              this.queryCategoryList()
              this.initCate()
            })
          }
        }
      })
    },
    cancelEdit() {
      this.createCateFormVisible = false
      this.cateCreateForm = {
        mode: 0,
        id: '',
        name: '',
        parentId: ''
      }
    }
  }
}
</script>

<style scoped>

</style>
